<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>天气预报</title>
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="Weather-style.css">
    <script src="./js/clock.js"></script>

</head>
<body>
   <div class="container today">
       <h3>地区：绵阳</h3>
       <div id="clock" style="font-size: 25px;float:left;margin-left: 235px">
        --:--:--
       </div>
       <h2 style="margin-left: 460px">一周天气预报</h2>
       <!--<hr/>-->
   </div>
   <div class="container" >
       <div class="row" style="background-image: url('img/beijing2.png');width: 780px;height: 400px; margin-left: 180px;margin-top: -100px">
           <div class="lib" >
               <ul>
                   <li><h4 id="data"><b>日期</b></h4></li>
                   <img id="img" alt=""/>
                   <li><div> <b id="tianqi">天气</b></div></li>
                   <li><div> <b id="tmp">大</b>℃~<b id="tmpp">小</b>℃</div></li>
                   <li><div><b id="fengli">风力</b></div></li>
               </ul>
           </div>
           <div class="lia" >
               <ul>
                   <li><div id="data1"><b>日期</b></div></li>
                   <img id="img1" alt=""/>
                   <li><div><b id="tianqi1">天气</b></div></li>
                   <li><div><b id="tmp1">大</b>℃~<b id="tmp11">小</b>℃</div></li>
                   <li><div><b id="fengli1">风力</b></div></li>
               </ul>
           </div>
           <div class="lia">
               <ul>
                   <li><div id="data2" ><b>日期</b></div></li>
                   <img id="img2" alt=""/>
                   <li><div><b id="tianqi2">天气</b></div></li>
                   <li><div><b id="tmp2">大</b>℃~<b id="tmp22">小</b>℃</div ></li>
                   <li><div><b id="fengli2">风力</b></div></li>
               </ul>
           </div>
           <div class="lia">
               <ul>
                   <li><div id="data3"><b>日期</b></div></li>
                   <img id="img3" alt=""/>
                   <li><div><b id="tianqi3">天气</b></div></li>
                   <li><div><b id="tmp3">大</b>℃~<b id="tmp33">小</b>℃</div ></li>
                   <li><div><b id="fengli3">风力</b></div></li>
               </ul>
           </div>
           <div class="lia">
               <ul>
                   <li><div id="data4"><b>日期</b></div></li>
                   <img id="img4" alt=""/>
                   <li><div><b id="tianqi4">天气</b></div></li>
                   <li><div><b id="tmp4">大</b>℃~<b id="tmp44">小</b>℃</div ></li>
                   <li><div><b id="fengli4">风力</b></div></li>
               </ul>
           </div>
           <div class="lia">
               <ul>
                   <li><div id="data5"><b>日期</b></div></li>
                   <img id="img5" alt=""/>
                   <li><div><b id="tianqi5">天气</b></div></li>
                   <li><div><b id="tmp5">大</b>℃~<b id="tmp55">小</b>℃</div ></li>
                   <li><div><b id="fengli5">风力</b></div></li>
               </ul>
           </div>
           <div class="lia">
               <ul>
                   <li><div id="data6"><b>日期</b></div></li>
                   <img id="img6" alt=""/>
                   <li><div><b id="tianqi6">天气</b></div></li>
                   <li><div><b id="tmp6">大</b>℃~<b id="tmp66">小</b>℃</div ></li>
                   <li><div><b id="fengli6">风力</b></div></li>
               </ul>
           </div>
       </div>
   </div>
<script>
    function test() {
        $.ajax({
            url: 'https://api.heweather.com/x3/weather',
            type: "get",
            data: {
                city: "绵阳",
                key: "5e2f9b2abb2c496e9178058d4ca5428d"
            },
            dataType: 'json',
            success: function (res) {

                try {
                    $("#tmp").text(res["HeWeather data service 3.0"][0].daily_forecast[0].tmp.max);
                    $("#tmpp").text(res["HeWeather data service 3.0"][0].daily_forecast[0].tmp.min);
                    $("#data").text(res["HeWeather data service 3.0"][0].daily_forecast[0].date);
                    $("#tianqi").text(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n);
                    $("#fengli").text(res["HeWeather data service 3.0"][0].daily_forecast[0].wind.sc);

                    $("#data1").text(res["HeWeather data service 3.0"][0].daily_forecast[1].date);
                    $("#tmp1").text(res["HeWeather data service 3.0"][0].daily_forecast[1].tmp.max);
                    $("#tmp11").text(res["HeWeather data service 3.0"][0].daily_forecast[1].tmp.min);
                    $("#tianqi1").text(res["HeWeather data service 3.0"][0].daily_forecast[1].cond.txt_n);
                    $("#fengli1").text(res["HeWeather data service 3.0"][0].daily_forecast[1].wind.sc);

                    $("#data2").text(res["HeWeather data service 3.0"][0].daily_forecast[2].date);
                    $("#tmp2").text(res["HeWeather data service 3.0"][0].daily_forecast[2].tmp.max);
                    $("#tmp22").text(res["HeWeather data service 3.0"][0].daily_forecast[2].tmp.min);
                    $("#tianqi2").text(res["HeWeather data service 3.0"][0].daily_forecast[2].cond.txt_n);
                    $("#fengli2").text(res["HeWeather data service 3.0"][0].daily_forecast[2].wind.sc);

                    $("#data3").text(res["HeWeather data service 3.0"][0].daily_forecast[3].date);
                    $("#tmp3").text(res["HeWeather data service 3.0"][0].daily_forecast[3].tmp.max);
                    $("#tmp33").text(res["HeWeather data service 3.0"][0].daily_forecast[3].tmp.min);
                    $("#tianqi3").text(res["HeWeather data service 3.0"][0].daily_forecast[3].cond.txt_n);
                    $("#fengli3").text(res["HeWeather data service 3.0"][0].daily_forecast[3].wind.dir);

                    $("#data4").text(res["HeWeather data service 3.0"][0].daily_forecast[4].date);
                    $("#tmp4").text(res["HeWeather data service 3.0"][0].daily_forecast[4].tmp.max);
                    $("#tmp44").text(res["HeWeather data service 3.0"][0].daily_forecast[4].tmp.min);
                    $("#tianqi4").text(res["HeWeather data service 3.0"][0].daily_forecast[4].cond.txt_n);
                    $("#fengli4").text(res["HeWeather data service 3.0"][0].daily_forecast[4].wind.dir);

                    $("#data5").text(res["HeWeather data service 3.0"][0].daily_forecast[5].date);
                    $("#tmp5").text(res["HeWeather data service 3.0"][0].daily_forecast[5].tmp.max);
                    $("#tmp55").text(res["HeWeather data service 3.0"][0].daily_forecast[5].tmp.min);
                    $("#tianqi5").text(res["HeWeather data service 3.0"][0].daily_forecast[5].cond.txt_n);
                    $("#fengli5").text(res["HeWeather data service 3.0"][0].daily_forecast[5].wind.sc);

                    $("#data6").text(res["HeWeather data service 3.0"][0].daily_forecast[6].date);
                    $("#tmp6").text(res["HeWeather data service 3.0"][0].daily_forecast[6].tmp.max);
                    $("#tmp66").text(res["HeWeather data service 3.0"][0].daily_forecast[6].tmp.min);
                    $("#tianqi6").text(res["HeWeather data service 3.0"][0].daily_forecast[6].cond.txt_n);
                    $("#fengli6").text(res["HeWeather data service 3.0"][0].daily_forecast[6].wind.dir);

                    if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="晴"){
                        $("#img").attr("src","./img/1.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="多云"){
                        $("#img").attr("src","./img/2.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="阴"){
                        $("#img").attr("src","./img/3.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="小雨"){
                        $("#img").attr("src","./img/4.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="多雨"){
                        $("#img").attr("src","./img/5.png")
                    }



                    if(res["HeWeather data service 3.0"][0].daily_forecast[1].cond.txt_n==="晴"){
                        $("#img2").attr("src","./img/1.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[1].cond.txt_n==="多云"){
                        $("#img2").attr("src","./img/2.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[1].cond.txt_n==="阴"){
                        $("#img2").attr("src","./img/3.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[1].cond.txt_n==="小雨"){
                        $("#img2").attr("src","./img/4.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[1].cond.txt_n==="多雨"){
                        $("#img2").attr("src","./img/5.png")
                    }


                    if(res["HeWeather data service 3.0"][0].daily_forecast[2].cond.txt_n==="晴"){
                        $("#img3").attr("src","./img/1.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[2].cond.txt_n==="多云"){
                        $("#img3").attr("src","./img/2.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[2].cond.txt_n==="阴"){
                        $("#img3").attr("src","./img/3.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[2].cond.txt_n==="小雨"){
                        $("#img3").attr("src","./img/4.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[2].cond.txt_n==="多雨"){
                        $("#img3").attr("src","./img/5.png")
                    }


                    if(res["HeWeather data service 3.0"][0].daily_forecast[3].cond.txt_n==="晴"){
                        $("#img4").attr("src","./img/1.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[3].cond.txt_n==="多云"){
                        $("#img4").attr("src","./img/2.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[3].cond.txt_n==="阴"){
                        $("#img4").attr("src","./img/3.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[3].cond.txt_n==="小雨"){
                        $("#img4").attr("src","./img/4.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[3].cond.txt_n==="多雨"){
                        $("#img4").attr("src","./img/5.png")
                    }


                    if(res["HeWeather data service 3.0"][0].daily_forecast[4].cond.txt_n==="晴"){
                        $("#img5").attr("src","./img/1.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[4].cond.txt_n==="多云"){
                        $("#img5").attr("src","./img/2.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[4].cond.txt_n==="阴"){
                        $("#img5").attr("src","./img/3.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[4].cond.txt_n==="小雨"){
                        $("#img5").attr("src","./img/4.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[4].cond.txt_n==="多雨"){
                        $("#img5").attr("src","./img/5.png")
                    }

                    if(res["HeWeather data service 3.0"][0].daily_forecast[5].cond.txt_n==="晴"){
                        $("#img6").attr("src","./img/1.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[5].cond.txt_n==="多云"){
                        $("#img6").attr("src","./img/2.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[5].cond.txt_n==="阴"){
                        $("#img6").attr("src","./img/3.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[5].cond.txt_n==="小雨"){
                        $("#img6").attr("src","./img/4.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[5].cond.txt_n==="多雨"){
                        $("#img6").attr("src","./img/5.png")
                    }

                    if(res["HeWeather data service 3.0"][0].daily_forecast[6].cond.txt_n==="晴"){
                        $("#img1").attr("src","./img/1.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[6].cond.txt_n==="多云"){
                        $("#img1").attr("src","./img/2.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[6].cond.txt_n==="阴"){
                        $("#img1").attr("src","./img/3.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[6].cond.txt_n==="小雨"){
                        $("#img1").attr("src","./img/4.png")
                    }
                    else if(res["HeWeather data service 3.0"][0].daily_forecast[6].cond.txt_n==="多雨"){
                        $("#img1").attr("src","./img/5.png")
                    }



                }
                catch (err) {
                    setTimeout(function () {
                        test()

                    }, 300)
                    console.log(err.message + "正在重新加载")
                }
            }
        })
    }
    test();
</script>


</body>
</html>
